<!-- 用户管理 -->
<template>
<com-drawer class="user-detail-wp" v-model="visible" :title="title" :loading="loadInterface > 0">
  <el-form class="this-form item-mb30" ref="form" :model="form" :rules="rules" label-width="10em" label-position="right" size="medium">
    <el-form-item label="登录账号" prop="username">
      <el-input v-model="form.username" :readonly="type != 1" placeholder="请输入登录账号"></el-input>
    </el-form-item>
    <template v-if="type == 1">
      <el-form-item label="登录密码" prop="password">
        <el-input v-model="form.password" type="password" placeholder="请输入登录密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmpassword">
        <el-input v-model="form.confirmpassword" type="password" placeholder="请确认登录密码"></el-input>
      </el-form-item>
    </template>
    <el-form-item label="用户昵称" prop="realname">
      <el-input v-model="form.realname" placeholder="请输入用户昵称"></el-input>
    </el-form-item>
    <el-form-item label="角色分配" prop="selectedroles">
      <el-select class="pw-100" v-model="form.selectedroles" multiple filterable placeholder="请选择角色">
        <el-option v-for="(item, index) in roleList" :key="index" 
          :label="item.roleName"
          :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="头像">
      <div class="tx-box"></div>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-select class="pw-100" v-model="form.sex" placeholder="请选择性别">
        <el-option v-for="(item, index) in $store.state.dict.sex" :key="index"
          :label="item.label"
          :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
    </el-form-item>
    <el-form-item label="手机号码" prop="phone">
      <el-input v-model="form.phone" placeholder="请输入手机号码"></el-input>
    </el-form-item>
    <el-form-item label="座机" prop="telephone">
      <el-input v-model="form.telephone" placeholder="请输入座机"></el-input>
    </el-form-item>
  </el-form>
  <template v-if="type != 3" slot="footer">
    <el-button size="small" @click="visible = false">取 消</el-button>
    <el-button size="small" type="primary" @click="submit()" :loading="btnLoading">{{ btnLoading ? '提交中 ...' : '确 定' }}</el-button>
  </template>
</com-drawer>
</template>
<script>

import {regex} from "@/utils/regexp.js";
import {role, user} from "@/config/api.js";

export default {
  data () {
    const checkNewPassword = (rule, value, callback) => {
      if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    return {
      visible: false,
      btnLoading: false,

      type: 1, // 类型 1-新增，2编辑，3详情
      detail: null, // 当前详情
      roleId: '', // 是否有有默认角色

      form: {
        username: '', // 登录账号
        password: '', // 登录密码
        confirmpassword: '', // 确认密码
        realname: '', // 用户昵称
        selectedroles: [], // 角色，保存的时候使用逗号拼接
        birthday: '', // 生日
        sex: '', // 性别
        email: '', // 邮箱
        phone: '', // 手机号码
        telephone: '', // 座机号码
      },

      rules: {
        username: [
          { required: true, message: "请输入登录账号", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
        ],
        confirmpassword: [
          { required: true, message: "请再次输入登录密码", trigger: "blur" },
          { validator: checkNewPassword, trigger: 'blur'}
        ],
        realname: [
          { required: true, message: "请输入用户昵称", trigger: "blur" },
        ],
        selectedroles: [
          { required: true, message: "请选择用户角色", trigger: "change", transform (data) { return data ? data.join(',') : ''; } },
        ],
        email: [
          { type: 'email', message: '请输入正确的邮箱格式', trigger: "blur" }
        ],
        phone: [
          { pattern: regex.mobile, message: "请输入正确的手机号码", trigger: "blur" }
        ],
        telephone:[
          { pattern: regex.tel, message: "请输入正确的座机号码", trigger: "blur" }
        ]
      },

      // 角色列表
      roleList: [],

    }
  },
  computed: {
    title () {
      return this.type == 1 ? '新增' : this.type == 2 ? '编辑' : '详情';
    }
  },
  methods: {
    open (type, detail, roleId) {
      this.type = type;
      this.detail = detail;
      this.roleId = roleId;

      this.initForm(); // 初始化表单

      this.loadInterface = 2; // 设置加载接口数量为2
      this.getRoleList(); // 获取角色列表
      this.getUserRoleList(); // 获取用户角色

      this.visible = true;
    },

    // 获取角色列表
    getRoleList () {
      this.$get(role.queryall).then(res => {
        if (res.success) {
          this.roleList = res.result;
        }
      })
    },

    // 获取用户角色
    getUserRoleList () {
      if (!this.detail) {
        this.loadInterface--;
        return;
      }
      var param = {
        userid: this.detail.id
      }
      this.$get(user.queryUserRole, param).then(res => {
        if (res.success) {
          this.form.selectedroles = res.result;
        }
      })
    },

    // 提交
    submit () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return;
        }

        var url = '', param = this.$g.copy(this.form), ajaxFn = '';

        // 国际物流特有-角色运营商
        // param.type = 3;
        // 角色列表
        param.selectedroles = param.selectedroles.join(',');

        if (this.type == 1) { // 添加
          url = user.add;
          ajaxFn = this.$post;
        } else if (this.type == 2) { // 编辑
          url = user.edit;
          param.id = this.detail.id;
          ajaxFn = this.$put;
        } else {
          return;
        }

        this.btnLoading = true;
        ajaxFn(url, param).then(res => {
          this.btnLoading = false;
          if (res.success) {
            this.$message.success(res.message);
            this.$emit('reload');
            this.visible = false;
          }
        }).catch(() => {
          this.btnLoading = false;
        })
      })
    },

    // 初始化表单
    initForm () {
      // 添加
      if (this.type == 1) {
        // 第一次进来不用重置
        if (this.$refs.form) {
          this.$refs.form.resetFields();
        }
        // 判断是否有默认角色
        if (this.roleId) {
          this.form.selectedroles = [this.roleId];
        }
      // 修改、详情
      } else {
        for (var key in this.form) {
          this.form[key] = this.detail[key];
        }
      }
    },

  }
}
</script>
<style lang="scss" scoped>
.user-detail-wp {
  .this-form {
    padding-right: 5em;
  }

  .tx-box {
    width: 100px;
    height: 100px;
    border: 1px dashed #d9d9d9;
    background: #fafafa;
  }
}
</style>